<template>
  <div>
    <div class="navbar">
      <p class="navbar-left" @click="doIt">返回</p>
      <p class="navbar-title">优惠券</p>
    </div>
    <!-- <div class="tab">
      <p>可用</p>
      <p>不可用</p>
    </div> -->

    <!-- 顶部导航，通过v-model，绑定当前激活标签对应的索引值 -->

    <van-tabs v-model="active">
      <van-tab title="可用">
        <div class="container">
          <div class="coupon" v-for="(item, lid) in data" :key="lid">
            <div class="list">
              <div class="left">
                <p class="p1">￥{{ item.denominations }}</p>
                <p class="p2">满{{ item.originCondition }}元可用</p>
              </div>
              <div class="right">
                <p class="p3">{{ item.name }}</p>
                <p class="p4">
                  2021.11.25<span></span>-<span>2022.11.07</span>
                </p>
              </div>
            </div>
            <div class="description">
              {{ item.description }}
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="过期" name="unavailable">
        <!-- <div>
          <div class="container">
            <div class="coupon">
              <div class="list">
                <div class="left">
                  <p class="p1 container1">￥20</p>
                  <p class="p2 container1">满200元可用</p>
                </div>
                <div class="right">
                  <p class="p3">新人大礼包</p>
                  <p class="p4">
                    2021.10.25<span></span>-<span>2021.11.07</span>
                  </p>
                </div>
              </div>
              <div class="description">已过期</div>
            </div>
            <div class="coupon">
              <div class="list">
                <div class="left">
                  <p class="p1 container1">￥40</p>
                  <p class="p2 container1">满400元可用</p>
                </div>
                <div class="right">
                  <p class="p3">新人大礼包</p>
                  <p class="p4">
                    2021.10.21<span></span>-<span>2021.11.25</span>
                  </p>
                </div>
              </div>
              <div class="description">已过期</div>
            </div>
          </div>
        </div> -->
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [],
      active: 0,
    };
  },
  mounted() {
    let token = localStorage.getItem("token");
    let url = "/v1/coupon/get";
    this.$get(url, token).then((res) => {
      if (token == null) {
        this.$toast("请登录");
        this.$router.push("/usercenter");
      } else {
        // console.log(res.data.data);

        this.data = res.data.data;
      }
    });
  },
  methods: {
    doIt() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.875rem;
  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.navbar-left:active {
  opacity: 0.7;
}
.navbar-left {
  margin-left: 0.9375rem;
}
.navbar-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: absolute;
  left: 40%;
}
.tab {
  display: flex;
  justify-content: space-around;
  height: 2.75rem;
  font-size: 0.875rem;
  color: #646566;
  cursor: pointer;
  line-height: 2.75rem;
  background-color: #fff;
}
.container {
  background-color: whitesmoke;
  height: 100%;
  width: 100%;
}
.container .coupon {
  margin: 0.75rem;
  padding-top: 1rem;

  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0 4px rgb(0 0 0 / 10%);
}
.container .coupon .list {
  overflow: hidden;
}
.container .coupon .list .left {
  float: left;
  margin-left: 1.25rem;
  margin-bottom: 1.25rem;
}
.container .coupon .list .right {
  float: left;
  color: #3f3f3f;
}
.container .coupon .list .left .p1 {
  margin-bottom: 0.375rem;
  font-weight: 300;
  font-size: 1.875rem;
  color: #ee0a24;
}
.container .coupon .list .left .p2 {
  color: #ee0a24;
}
.container .coupon .list .right .p3 {
  margin-top: 0.23rem;
  margin-left: 1.5625rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.container .coupon .list .right .p4 {
  margin-top: 1.4375rem;
  margin-left: 1.5625rem;
  font-size: 0.9375rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.container .description {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  border-top: 0.0625rem dashed rgba(0, 0, 0, 0.329);
  color: #3f3f3f;
}
.container1 {
  color: #000 !important;
}
</style>
